<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的知识---拖放</title>
    <style>
        #div1,#div2{
            width:500px;
            height:500px;
            border:1px solid black;
        }
        img{
            width:150px;
            height:auto;
        }
    </style>
</head>
<body>
<div id="div1">
    <img src="640.jpg/" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)" id="drag1">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">

</div>
<script>
    //设置元素为可拖放，draggable="true"
    //拖放什么，ondragstart   和setData()
    //ondragstrat属性调用了一个函数，drag(ev),他规定了被拖方的数据
    //dataTransfer.setData()方法设置被拖放数据的数据类型和值，
//    function drag(ev){
//        //值是可拖动元素的id，数据类型是text
//        ev.dataTransfer.setData('TEXT',ev.target.id);
//    }

    //把拖动的东西放到哪里   ondragover
    //默认的，无法将数据或者元素放置到其他元素中，如果需要设置允许放置，必须
    //阻止对元素的默认处理方式，通过调用ondragover的event.preventDefault()方法
    //event.preventDefault();

    //进行放置ondrop，当放置被拖放数据时，会发生drop事件，ondrop属性会调用一个函数drop(event);
    //dataTransfer.getData()方法得到被拖放的数据和值
    //总的来说当拖放一个东西时，会发生ondragstart的事件，ondragover规定了在何处放置事件，当放置被拖放时对象时，会触发
    //ondrop事件，所以拖放就是这么个过程，就和onkeydown，onkeyup很像。
//    function drop(ev){
//        ev.preventDefault();
//        var data=ev.dataTransfer.getData('TEXT');
//        ev.target.appendChild(document.getElementById(data));
//    }
//    function allowDrop(ev)
//    {
//        ev.preventDefault();
//    }


        function allowDrop(ev)
        {
            ev.preventDefault();
        }

    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }

</script>
</body>
</html>